<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码</title>
    <#assign base=request.contextPath  />
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css" media="all">

    <script type="text/javascript" src="${base}/backstage/QRCode/js/require.js"></script>
    <script type="text/javascript" src="${base}/backstage/QRCode/js/jquery-3.1.0.min.js"></script>
    <script src="${base}/backstage/layui/layui.js?t=1"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js?t=1"></script>
</head>
<body>
<br>
<#--<input type="text" value="${userId}"/>-->
<form class="layui-form " action="" style="padding-left: 15px;">
    <div class="layui-inline">
        <label class="layui-form-label">桌号</label>
        <div class="layui-input-inline">
            <select name="tableNumberId" id="tableNumberId" lay-verify="required" lay-search="">
                <option value="">请选择桌号</option>
                <#list tableNumber as tableNumber>
                    <option value="${tableNumber.id}">${tableNumber.name}号桌</option>
                </#list>
            </select>
        </div>
    </div>
    <input type="file" style="margin-left: 30px;" id="background-img-select-native" accept="image/*">
</form>
<br>
<br>

<div style="position: absolute;left:10%">
<#--    <input type="file" id="background-img-select-native" accept="image/*">-->
</div>
<br>
<br>
<br>


<div style="position: absolute;left:10%">
    <img id="qrcode" style="margin-top: 0;" class="responsive-img" src="">
</div>




<script>
    layui.use(['form', 'layer','table'], function () {
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery
        var table = layui.table;
    })


    var awesomeQR;
    var __awesome_qr_base_path = "${base}/backstage/QRCode/js";
    require(['${base}/backstage/QRCode/js/awesome-qr.js'], function (instance) {
        awesomeQR = instance;
    });

        function handleFileSelectBKG(evt) {
            var files = evt.target.files; // FileList object
            // files is a FileList of File objects. List some properties.
            var output = [];
            if (files.length <= 0) return;
            var file = files[0];
            if (!file.type.toString().startsWith("image/")) {
                $("#image-result").hide();
                alert('Oops, the file type is not correct.');
                return;
            }
            if($("#tableNumberId").val()==""){
                layer.msg("请选择桌号!")
                return;
            }
            var tableNumber = $("#tableNumberId").val();
            //console.log(file);
            var url = URL.createObjectURL(file);
            var img = new Image();
            var backgroundImg = undefined;
            img.onload = function () {
                backgroundImg = img;
                awesomeQR.create({
                    <!--连接土豆网视频-->
                    // text: 'http://cmsrlpwehz.51http.tech/user/login.html',
                    text: 'http://cmsrlpwehz.51http.tech/QRCode/index.html?tableNumberId='+tableNumber+"&userId="+'${userId}',
                    <#--text: 'http://www.fzshang.top/QRCode/index.html?userId='+'${userId}',-->
                    size: 300,
                    margin: 20,
                    backgroundImage: img,
                    bindElement: 'qrcode'
                });
            };
            console.log("file;"+file);
            console.log("url:"+url);
            img.src = url;
            console.log("img:"+img);
            $("#tt").append(img);
            document.getElementById('qrcode').src = "";
            console.log("img:"+img);
        }

        $(function(){
            document.getElementById('background-img-select-native').addEventListener('change', handleFileSelectBKG, false);
        })


</script>
</body>
</html>